<template>
	<view>
		<!-- 头部 -->
		<yHeader :current="4" :screenWidth="screenWidth" @Tabs="handleTabs"></yHeader>
		<!-- pv端内容 -->
		<view v-if="screenWidth > 480" class="__inner">
			<view class="contentrow">
				<view class="label-recommend"> 身份分类 </view>
				<view class="sub-row">
					<view v-for="(item, index) in category" @click="SwitchVariety(item, index)" :key="index"
						:class="Variety == index ? 'sub text-' + ThemeColors : 'sub'" style="cursor: pointer">{{ item }}
					</view>
				</view>
			</view>
			<yTable :loading="loading" @row-click="handleDetail" @limitval="limitval" @pageval="pageval"
				:page="form.page" :limit="form.limit" :total="total" :tableData="tableData">
				<el-table-column align="center" label=" " width="100">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis flex align-center justify-center">
							<image v-if="row.Enterprise_Logo" style="width: 150rpx; height: 150rpx"
								:src="Domain_Business + row.Enterprise_Logo" mode=""></image>
							<image v-else style="width: 150rpx; height: 150rpx; border-radius: 50%"
								src="../../static/icon/NoLogo.png" mode=""></image>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="企业名称" width="180">
					<template v-slot="{ row }">
						<view class="flex align-center" :title="row.Enterprise_Name">
							<text class="text-ellipsis font" style="width: 180px">{{
                row.Enterprise_Name
              }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="管理员名称" width="180">
					<template v-slot="{ row }">
						<view class="flex align-center" :title="row.ID_Name
">
							<text class="text-ellipsis font" style="width: 180px">{{
		        row.ID_Name

		      }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="标记身份" width="180">
					<template v-slot="{ row }">
						<text v-if="row.User_Type=='0'">商协会</text>
						<text v-if="row.User_Type=='1'">买家</text>
						<text v-if="row.User_Type=='2'">卖家</text>
					</template>
				</el-table-column>
				<el-table-column align="center" label="溯源基地" width="180">
					<template v-slot="{ row }">
						<view class="flex flex-column" :title="row.Traceability_Base_Name">
							<text v-if="row.Traceability_Base_Name != ''"
								v-for="(item, index) in row.Traceability_Base_Name.split('|')"
								:key="index">{{ item }}</text>
							<text v-else>该公司暂无添加溯源基地</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="企业地址">
					<template v-slot="{ row }">
						<view class="w-100 text-ellipsis" :title="row.Enterprise_Address">
							<text>{{ row.Enterprise_Address }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="企业简介">
					<template v-slot="{ row }">
						<view :title="row.Enterprise_Profile">
							<text class="text-ellipsis-2">{{
                row.Enterprise_Profile
                  ? row.Enterprise_Profile
                  : "该公司暂未填写公司介绍"
              }}</text>
						</view>
					</template>
				</el-table-column>
				<el-table-column align="center" label="认证情况">
					<template v-slot="{ row }">
						<image style="width: 40rpx; height: 40rpx" src="../../static/icon/order-success.png" mode="">
						</image>
					</template>
				</el-table-column>
				<el-table-column align="center" prop="address" label="操作">
					<template v-slot="{ row }">
						<text :class="'text-' + ThemeColors">查看详情</text>
					</template>
				</el-table-column>
			</yTable>
		</view>
		<!-- 移动端 -->
		<view v-else-if="screenWidth <= 480" class="mb-5 bg-grey">
			<!-- 列表 -->
			<view class="flex flex-column align-center pb-2 pt-2" style="width: 100%">
				<view @click="handleDetail(item)" v-for="(item, index) in tableData" :key="index"
					class="flex mb-2 rounded-lg bg-white" style="width: 95%; position: relative">
					<view class="flex-shrink flex justify-center align-center rounded-lg"
						style="height: 300rpx; width: 270rpx">
						<image v-if="item.Enterprise_Logo" class="rounded-circle border border-grey"
							style="height: 250rpx; width: 250rpx" :src="Domain_Business + item.Enterprise_Logo" mode="">
						</image>
						<image v-else class="rounded-circle border border-grey" style="height: 250rpx; width: 250rpx"
							src="../../static/icon/NoLogo.png" mode=""></image>
					</view>
					<view class="flex" style="width: 100%; height: 100%">
						<view class="flex flex-column justify-between m-2 w-100">
							<view style="height: 80rpx; width: 400rpx">
								<text class="font text-ellipsis-2">{{
                  item.Enterprise_Name
                }}</text>
							</view>
							<view class="" v-if="item.Traceability_Base_Name">
								<text class="font-sm px-1 border mr-1"
									v-for="(i, id) in item.Traceability_Base_Name.split('|')" :key="id"
									:class="'text-' + ThemeColors + ' border-' + ThemeColors">{{ i }}</text>
							</view>
							<view style="">
								<text class="font-sm text-ellipsis-2">企业地址：{{ item.Enterprise_Address }}</text>
							</view>
							<view class="">
								<text
									class="font-sm text-muted text-ellipsis-2">企业文化：{{ item.Enterprise_Profile }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<yFooter Show v-if="screenWidth > 480" :bg="'bg_white'" :screenWidth="screenWidth"></yFooter>
	</view>
</template>

<script>
	const app = getApp();
	import yHeader from "@/components/yHeader.vue";
	import yFooter from "@/components/yFooter.vue";
	import yTable from "@/components/yTable.vue";
	import {
		EnterpriseAll
	} from "@/api/traceability.js";
	import {
		GoodsFileInquiry
	} from "@/api/global.js";
	import {
		getUserAllFQ
	} from "@/api/traceability.js";
	export default {
		components: {
			yHeader,
			yFooter,
			yTable,
		},
		data() {
			return {
				screenWidth: uni.getSystemInfoSync().windowWidth,
				ThemeColors: app.globalData.ThemeColors,
				Domain_Business: app.globalData.Domain_Business,
				form: {
					page: 1, //页数
					limit: 5, //每页数据条数
					User_Type: "",
				},
				Variety: 0,
				total: 0,
				tableData: [],
				loading: false,
				category: [
					//用户专区分类筛选
					"全部",
					"商协会",
					"买家",
					"卖家",
				],
			};
		},
		onLoad() {
			window.addEventListener("scroll", this.handleScroll);
			this.SwitchVariety("全部");
		},
		methods: {
			async SwitchVariety(i, index) {
				if (i == "全部") {
					this.Variety = 0;
					this.form.User_Type = "";
				} else {
					this.form.User_Type = index-1;
					this.Variety = index;
				}
				this.getList(this.form)
			},
			async getList(data) {
				const res = await getUserAllFQ({
					data
				});
				this.tableData = res.tableData;
				this.total = Number(res.limit)
			},
			handleTabs(url) {
				uni.navigateTo({
					url,
				});
			},
			handleScroll() {
				const scrollTop =
					document.documentElement.scrollTop || document.body.scrollTop;
				// 获取页面的可视高度
				const clientHeight =
					document.documentElement.clientHeight || document.body.clientHeight;
				// 获取页面的总高度
				const scrollHeight =
					document.documentElement.scrollHeight || document.body.scrollHeight;
				// 判断是否滑动到底部
				if (scrollTop + clientHeight >= scrollHeight && this.screenWidth <= 480) {
					// 执行你想要执行的函数
					if (this.total > this.tableData.length) {
						this.getData_m(this.form);
					}
				}
			},
			handleDetail(row) {
				uni.navigateTo({
					url: "/pages/detail/enterprise-detail?id=" +
						row.Enterprise_Info_SerialNumber,
				});
			},
			async getData_m(data) {
				//移动端适配
				this.form.page++;
				const res = await EnterpriseAll({
					data: this.form,
				});
				if (res.redirect && res.redirect == "REDIRECT") {
					uni.removeStorageSync("loginInfo");
					uni.navigateTo({
						url:'/pages/login/login'
					})
				} else if (res.Status == "success") {
					this.tableData.push(...res.tableData);
				}
			},
			limitval(val) {
				this.form.page = 1;
				this.form.limit = val;
				this.getList(this.form);
			},
			pageval(val) {
				this.form.page = val;
				this.getList(this.form);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.contentrow {
		border: 1px solid #ddd;
		border-top: 0;

		.label-recommend {
			font-size: 28rpx;
			color: #45b035;
			padding-left: 40rpx;
			border-bottom: 1px dashed #efefef;
			line-height: 100rpx;
		}

		.sub-row {
			display: flex;
			padding-left: 20rpx;
			border-bottom: 1px dashed #efefef;
			font-size: 28rpx;
			letter-spacing: 0.7px;
			position: relative;
			height: 100rpx;
			overflow-y: hidden;
		}

		.sub {
			transition: all 0.5s;
			padding: 20rpx 0;
			margin: 10rpx 20rpx;
			line-height: 42rpx;
		}
	}
</style>